<template>
  <div class="NavBarWrap">
    <div
      :class="{ active: '/' + item.children[0].path == $route.path }"
      v-for="(item, index) in list"
      :key="index"
      @click="toPage(item.children[0].path)"
    >
      <img
        :src="
          '/' + item.children[0].path == $route.path
            ? item.meta.iconSel
            : item.meta.icon
        "
        alt=""
      />
      {{ item.meta.title }}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    list() {
      return this.$router.options.routes.filter((item) => !item.meta.hidden);
    },
  },
  methods: {
    toPage(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style lang='scss'>
.NavBarWrap {
  width: 100vw;
  height: 120px;
  background-color: rgb(8, 188, 38);
  display: flex;
  position: fixed;
  bottom: 0;
  color: azure;
  div {
    flex: 1;
    img{
      display: block;
      margin: 10px auto;
      height: 50px;
    }
  }
  .active{
    color: yellowgreen;
  }
}
</style>